<template>
  <div class="app">
    <div class="header">
      <h2>饿了么</h2>
      <span
        @click="hand(index)"
        :class="{ active: arrindex == index }"
        v-for="(item, index) in title"
        :key="index"
        >{{ item }}</span
      >
    </div>
    <div class="good" v-for="(item, index) in good" :key="index">
      <div class="left">
        <img src="../assets/good1.webp" alt="" />
      </div>
      <div class="right">
        <p>{{ item.title }}</p>
        <p>{{ item.name }}</p>
        <p>{{ item.little }}</p>
        <span>￥{{ item.price }}</span>
        <button>{{ item.go }}</button>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      arrindex: 0,
      title: ["全部", "待消费", "待评价", "退款"],
      good: [
        {
          title: "汉堡王|新天地餐厅",
          name: "买1送1明星黄堡|用心火烤 肉质紧实 鲜嫩多汁",

          price: 25,
          oldprice: 50,

          go: "再来一单",
        },
        {
          title: "华莱士|长治路店",
          name: "华莱士|聚划算单人套餐|进店必选",

          price: 12.2,
          oldprice: 31.2,
          num: 173,
          go: "再来一单",
        },
        {
          title: "贡天下山西特产|高新店",
          name: "白老大小米果仁酥200g【爆爆团】",

          price: 30,
          oldprice: 89.6,
          num: 160,
          go: "再来一单",
        },
      ],
    };
  },
};
</script>
  
  <style lang="scss" scoped>
.header h2 {
  text-align: center;
  margin-bottom: 30px;
}
.header span {
  padding: 4px 10px;
}
.active {
  font-weight: bold;
  font-size: 17px;
  border-bottom: 3px solid skyblue;
}
.good {
  width: 90%;
  height: 167px;
  margin: 0 5%;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #fff;
}
.left {
  float: left;
}
.right {
  float: left;
  margin-left: 10px;
}
.left img {
  width: 97px;
  height: 126px;
}
.right p:nth-child(1) {
  color: #999;
  padding: 4px 0;
  width: 200px;
}
.right p:nth-child(2) {
  font-size: 18px;
  font-weight: bold;
  width: 200px;
  word-wrap: break-word;
}
.right p:nth-child(3) {
  color: red;
  color: 14px;
}
.right span:nth-child(4) {
  color: red;
  font-weight: bold;
  font-size: 18px;
}
.right button:nth-child(5) {
  background: rgb(255, 255, 255);
  color: rgb(47, 185, 240);
  border: 1px solid skyblue;
  outline: none;
  height: 30px;
  border-radius: 30px;
  width: 98px;
  text-align: center;
  margin-left: 50px;
}
.right p:nth-child(6) span:nth-child(1) {
  color: #999;
  font-size: 13px;
}
.right p:nth-child(6) span:nth-child(2) {
  margin-left: 87px;
  color: crimson;
  font-size: 13px;
}
</style>